<!--
 * @Author: your name
 * @Date: 2020-11-04 14:47:47
 * @LastEditTime: 2021-06-01 07:30:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ws-shop\src\views\Cart.vue
-->
<template>
  <div class="collection">
    <div class="collection-main" v-if="collection.length === 0">
      <h3>没有收藏哦<br>快去逛逛吧</h3>
    </div>
    <div class="collection-main" v-else>
      <van-swipe-cell
        v-for="shop in collection"
        :key="`shop-${shop.id}`"
      >
        <div class="collection-item" @click="back(shop.id)">
            <div class="collection-item-left">
                <img :src="shop.image" alt="" />
            </div>
            <div class="collection-item-info">
                <h4>{{shop.title}}</h4>
                <p>
                    <span>￥{{shop.price | toFix2}}</span>
                </p>
            </div>
        </div>
        <template #right>
          <van-button square @click="delCollectionShop({ id: shop.id })" text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
import {
  mapState,
  mapMutations
} from 'vuex'
export default {
  name: 'collection',
  computed: {
    ...mapState(['collection'])
  },
  methods: {
    ...mapMutations(['delCollectionShop']),
    back (e) {
      if (e < 1000) {
        this.$router.replace(`/details?id=${e}`)
      } else {
        this.$router.replace(`/detail?id=${e}`)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.collection {
  height: 100%;
  background-color: rgb(245, 245, 245);
  display: flex;
  flex-direction: column;
  &-main {
    flex: 1;
    padding: 5px 10px;
  }
  h3 {
    font-size: 25px;
    font-family: '宋体';
    text-align: center;
    margin-top: 200px;
    color: #999;
  }
  .van-submit-bar {
    position: static;
  }
  .collection-item {
    display: flex;
    margin: 5px 0;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    &-left {
      padding-right: 10px;
      display: flex;
      align-items: center;
      img {
        width: 50px;
      }
    }
    &-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      h4 {
        font-size: 12px;
        color: #43240c;
      }
      p {
        display: flex;
        justify-content: space-between;
        span {
          color: #ee0a24;
        }
      }
    }
  }
  .delete-button {
    height: 100%;
  }
}
</style>
